<div id="add-permissions-modal" class="AddPermissions modal fade">
    <div class="AddPermissions-backDrop is-loggedOut"></div>
    <div class="AddPermissions-dialog">
        <div class="AddPermissions-content AddPermissions-content--userTeam
            is-loggedOut">
            <!-- begin header -->
            <div class="AddPermissions-header">
                <div class="List-header">
                    <div class="List-title">
                        <div class="List-titleText ng-binding">
                            {{ owner.name || owner.username }}
                            <div class="List-titleLockup"></div>
                            {{ title | uppercase }}
                        </div>
                    </div>
                    <div class="Form-exitHolder">
                        <button class="Form-exit" ng-click="closeModal()">
                            <i class="fa fa-times-circle"></i>
                        </button>
                    </div>
                </div>
            </div>
            <!-- end header -->
            <div id="AddPermissions-body" class="AddPermissions-body">
                <!-- begin section 1 -->
                <div class="AddPermissions-directions">
                    <span class="AddPermissions-directionNumber">
                        1
                    </span>
                    <div translate>
                        Please select resources from the lists below.
                    </div>
                </div>

                <div class="Form-tabHolder">
                    <div class="Form-tab"
                        ng-click="selectTab('job_templates')"
                        ng-class="{'is-selected': tab.job_templates }" translate>
                        Job Templates
                    </div>
                    <div class="Form-tab"
                        ng-click="selectTab('workflow_templates')"
                        ng-class="{'is-selected': tab.workflow_templates}"
                    translate>
                        Workflow Templates
                    </div>
                    <div class="Form-tab"
                        ng-click="selectTab('projects')"
                        ng-class="{'is-selected': tab.projects }" translate>
                        Projects
                    </div>
                    <div class="Form-tab"
                        ng-click="selectTab('inventories')"
                        ng-class="{'is-selected': tab.inventories}"
                    translate>
                        Inventories
                    </div>
                    <div class="Form-tab"
                        ng-click="selectTab('credentials')"
                        ng-class="{'is-selected': tab.credentials}"
                    translate>
                        Credentials
                    </div>
                    <div class="Form-tab"
                        ng-click="selectTab('organizations')"
                        ng-class="{'is-selected': tab.organizations}"
                    translate>
                        Organizations
                    </div>
                </div>

                <div id="AddPermissions-jobTemplates" class="AddPermissions-list" ng-show="tab.job_templates">
                    <rbac-multiselect-list view="JobTemplates" all-selected="allSelected" dataset="resolve.jobTemplatesDataset"></rbac-multiselect-list>
                </div>
                <div id="AddPermissions-workflowTemplates" class="AddPermissions-list" ng-show="tab.workflow_templates">
                    <rbac-multiselect-list view="WorkflowTemplates" all-selected="allSelected" dataset="resolve.workflowTemplatesDataset"></rbac-multiselect-list>
                </div>
                <div id="AddPermissions-projects" class="AddPermissions-list" ng-show="tab.projects">
                    <rbac-multiselect-list view="Projects" all-selected="allSelected" dataset="resolve.projectsDataset"></rbac-multiselect-list>
                </div>
                <div id="AddPermissions-inventories" class="AddPermissions-list" ng-show="tab.inventories">
                    <rbac-multiselect-list view="Inventories" all-selected="allSelected" dataset="resolve.inventoriesDataset"></rbac-multiselect-list>
                </div>
                <div id="AddPermissions-credentials" class="AddPermissions-list" ng-show="tab.credentials">
                    <rbac-multiselect-list view="Credentials" all-selected="allSelected" dataset="resolve.credentialsDataset"></rbac-multiselect-list>
                </div>
                <div id="AddPermissions-organizations" class="AddPermissions-list" ng-show="tab.organizations">
                    <rbac-multiselect-list view="Organizations" all-selected="allSelected" dataset="resolve.organizationsDataset"></rbac-multiselect-list>
                </div>
                <!-- end section 1 -->

                <!-- begin section 2 -->
                <div ng-show="showSection2Container()">
                    <div class="AddPermissions-separator"></div>
                    <div class="AddPermissions-directions">
                        <span class="AddPermissions-directionNumber">
                            2
                        </span>
                        <translate>Please assign roles to the selected resources</translate>
                    </div>
                    <div class="Form-tabHolder">
                        <div class="Form-tab"
                            ng-click="selectTab('job_templates')"
                            ng-class="{'is-selected': tab.job_templates }"
                            ng-show="showSection2Tab('job_templates')" translate>
                            Job Templates
                        </div>
                        <div class="Form-tab"
                            ng-click="selectTab('workflow_templates')"
                            ng-class="{'is-selected': tab.workflow_templates }"
                            ng-show="showSection2Tab('workflow_templates')" translate>
                            Workflow Templates
                        </div>
                        <div class="Form-tab"
                            ng-click="selectTab('projects')"
                            ng-class="{'is-selected': tab.projects}"
                            ng-show="showSection2Tab('projects')"
                        translate>
                            Projects
                        </div>
                        <div class="Form-tab"
                            ng-click="selectTab('inventories')"
                            ng-class="{'is-selected': tab.inventories}"
                            ng-show="showSection2Tab('inventories')"
                        translate>
                            Inventories
                        </div>
                        <div class="Form-tab"
                            ng-click="selectTab('credentials')"
                            ng-class="{'is-selected': tab.credentials}"
                            ng-show="showSection2Tab('credentials')"
                        translate>
                            Credentials
                        </div>
                        <div class="Form-tab"
                            ng-click="selectTab('organizations')"
                            ng-class="{'is-selected': tab.organizations}"
                            ng-show="showSection2Tab('organizations')"
                        translate>
                            Organizations
                        </div>
                    </div>
                    <div class="AddPermissions-roleSet">
                        <!-- role drop-downs -->
                        <div class="AddPermissions-roleSet-dropdown" ng-repeat="(type, roleSet) in keys"
                            ng-show="tab[type] && showSection2Tab(type)">
                            <select id="{{type}}-role-select" class="form-control"
                            ng-model="roleSelection[type]"
                            ng-options="key as value.name for (key , value) in roleSet">
                                <option value="" selected hidden />
                            </select>
                        </div>
                        <div class="AddPermissions-keyToggle btn"
                            ng-class="{'is-active': showKeyPane}"
                            ng-click="toggleKeyPane()" translate>
                            Key
                        </div>
                    </div>

                    <div class="AddPermissions-keyPane" ng-show="showKeyPane">
                        <div class="AddPermissions-keyRow" ng-repeat="key in keys[currentTab()]">
                            <div class="AddPermissions-keyName">
                                {{ key.name }}
                            </div>
                            <div class="AddPermissions-keyDescription">
                                {{ key.description || "No description provided" }}
                            </div>
                        </div>
                    </div>
                </div>

                <!-- lists of selected resources -->
                <!-- (type, collection) => ('resource', {id: {}, ... }) -->
                <div ng-repeat="(type, collection) in allSelected">
                    <rbac-selected-list
                        resource-type="type"
                        collection="collection"
                        selected="allSelected"
                        ng-show="tab[type]">
                    </rbac-selected-list>
                </div>
                <!-- end section 2 -->
            </div>
            <!-- begin footer -->
            <div class="AddPermissions-footer">
                <div class="buttons Form-buttons AddPermissions-buttons">
                    <button type="button"
                        class="btn btn-sm Form-cancelButton"
                        ng-click="closeModal()" translate>
                        Cancel
                    </button>
                    <button type="button"
                        class="btn btn-sm Form-saveButton"
                        ng-click="saveForm()"
                        ng-disabled="!saveEnabled()" translate>
                        Save
                    </button>
                </div>
            </div>
            <!-- end footer -->
        </div>
   </div>
</div>
